
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>域名实现无限邮可收发邮件 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>域名实现无限邮可收发邮件 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">该教程描述的免费企业邮箱方案利用了哪两个核心服务？它们各自承担什么关键功能？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">该方案利用了 Cloudflare 和 Resend.com 两个核心服务。Cloudflare 主要负责接收所有发送到你域名的邮件，而 Resend.com 则负责通过你的域名向外发送邮件。</div>
          </div>
          <div class="card-source">来源: 1. Cloudflare 企业邮箱简介</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">在 Cloudflare 的电子邮件路由中，“Catch-all address”规则的核心作用是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">“Catch-all address”规则的核心作用是捕获所有发送到该域名下任意前缀邮箱地址的邮件，并将它们统一转发到一个你指定的真实邮箱地址（例如QQ邮箱或163邮箱）。</div>
          </div>
          <div class="card-source">来源: 2.3. 配置 Catch-All 地址</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">为了让 Cloudflare 的电子邮件路由功能生效，需要在域名的 DNS 中添加什么类型的记录？这些记录是手动添加还是自动添加？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">需要添加 MX 记录。在启用电子邮件路由的过程中，Cloudflare 会自动为用户添加所需的 MX 记录。</div>
          </div>
          <div class="card-source">来源: 2.2. 启用电子邮件路由</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">为了能使用 Resend.com 发送邮件，需要在 Cloudflare 的 DNS 设置中添加哪几种类型的记录？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">需要在 Cloudflare 中添加由 Resend.com 提供的三条 DNS 记录，具体包括一条 MX 类型的记录和两条 TXT 类型的记录。</div>
          </div>
          <div class="card-source">来源: 3.3. 配置 DNS 记录</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">在使用 Resend.com 的 API (无论是 Python 还是 cURL) 发送邮件时，如何完成身份验证？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">身份验证是通过一个在 Resend.com 网站上生成的 API Key 完成的。这个 Key 需要在 API 请求中提供，例如在 cURL 命令中作为 Bearer Token，或在 Python 代码中设置为 `resend.api_key`。</div>
          </div>
          <div class="card-source">来源: 3.1. 生成 Resend.com API Key, 3.4.1. Python 代码发送, 3.4.2. cURL 命令发送</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">Resend.com 提供的免费计划在邮件发送数量上有哪些具体的限制？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Resend.com 的免费计划每月提供 3000 条邮件发送额度，同时每日的发送上限为 100 条。</div>
          </div>
          <div class="card-source">来源: 4. Resend.com 免费额度</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">将一个已有的域名交由 Cloudflare 管理以使用其服务的关键步骤是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">关键步骤是登录你的域名购买网站，将域名的名称服务器（Name Server）地址，更改为 Cloudflare 在添加站点时提供给你的两个指定地址。</div>
          </div>
          <div class="card-source">来源: 2.1. 将域名托管到 Cloudflare</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">通过 Resend.com API 发送邮件时，对于`from`字段（发件人地址）有什么特殊要求？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">对于`from`字段，发件人的邮箱地址必须使用你已经在 Resend.com 上添加并成功验证的域名，格式为 `your_name@your_domain.com`。</div>
          </div>
          <div class="card-source">来源: 3.4.1. Python 代码发送</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">在 Cloudflare 中设置完邮件转发的目标邮箱后，为什么需要对该邮箱进行验证？如何完成验证？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">需要验证是为了确认你拥有该目标邮箱。Cloudflare 会向这个邮箱发送一封验证邮件，你必须登录该邮箱并点击邮件中的“验证电子邮件地址”链接，验证通过后，邮件转发功能才会正式生效。</div>
          </div>
          <div class="card-source">来源: 2.3. 配置 Catch-All 地址</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
